<template>
  <div class="assign-role">
    <div class="role-list">
      <!-- 角色列表: 多选框 -->
      <!-- 由于后端获取的值是 label 中的值, 页面上显示的值与js中获取的值是不同的, 所以需要进行区分
      所以这里 label 绑定的应该是每一项的 id, 通过插值表达式来将 name 属性值展示给前端页面 -->
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="item in list"
          :key="item.id"
          :label="item.id"
        >{{ item.name }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="role-btns">
      <!-- 按钮 -->
      <el-button type="warning" size="medium" @click="$emit('cencle')">取消</el-button>
      <el-button type="primary" size="medium" @click="onSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
import { getRolesListRequest } from '@/api/setting'
import { userInfoDetailRequest } from '@/api/user'
import { userAssignRolesRequest } from '@/api/employees'
export default {
  name: 'AssignRole',
  props: {
    // 子组件接收父组件传递的当前项的 id, 将其作为请求参数传递给服务器
    currentId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 多选框value值数组列表
      list: [],
      // 获取多选框被选中的列表
      checkList: []
      // data 里面不要写太多变量
      // 因为
    }
  },
  created() {
    this.getRolesList() // 获取角色列表
  },
  methods: {
    // ^ ==================== 请求 ====================
    // 请求 - 获取所有角色列表 & 获取角色权限
    async getRolesList() {
      try {
        // 获取所有角色列表
        const res = await getRolesListRequest({ page: 1, pagesize: 1000 })
        // 业务代码成功条件
        if (res.success) {
          this.list = res.data.rows
        } else {
          this.$message.error(res.message)
        }
        // 根据 id 获取用户信息的接口
        // 选中角色后数据回显, 将当前用户的所有角色, 赋给多选框, 将角色的状态同步, 同步多选框的选中状态
        const res2 = await userInfoDetailRequest(this.currentId)
        if (res2.success) {
          this.checkList = res2.data.roleIds || [] // 数据回显, 将用户角色回显给选中列表
        } else {
          this.$message.success(res.message || '根据id获取用户信息的接口失败')
        }
      } catch (error) {
        console.log('获取所有角色列表失败', error)
      }
    },
    // 请求 - 给员工分配角色
    async userAssignRoles() {
      try {
        // 请求参数是一个对象, 有两个属性, 分别为
        const res = await userAssignRolesRequest({
          id: this.currentId,
          roleIds: this.checkList
        })
        if (res.success) {
          this.$message.success('分配角色成功!')
          this.$emit('cencle') // 发送完毕通知父组件关闭模态框
        } else {
          this.$message.error('分配角色失败!')
        }
      } catch (error) {
        console.log('给员工分配角色失败!', error)
      }
    },
    // ^ ==================== 事件 ====================
    // 事件 - 体检按钮点击事件
    onSubmit() {
      this.userAssignRoles() // 发送请求分配角色
    }
  }
}
</script>

<style lang="scss" scoped>
.role-btns {
  margin-top: 25px !important;
  text-align: right !important;
}
</style>
